<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS Service</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>当前页面的URL:</p>-->
    <!--<h3>{{myUrl}}</h3>-->
<!--</div>-->
<!--<p>该实例使用了内建的$location服务获取当前页面的URL</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope, $location) {-->
        <!--$scope.myUrl = $location.absUrl();-->
    <!--})-->
<!--</script>-->

<!--$http服务-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>网页信息</p>-->
    <!--{{info}}-->
<!--</div>-->
<!--<p>$http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope, $http) {-->
        <!--$http.get("model.html").then(function (response) {-->
            <!--$scope.info = response.data;-->
        <!--})-->
    <!--})-->
<!--</script>-->

<!--$timeout服务-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>两秒后显示信息:</p>-->
    <!--<h1>{{myHeader}}</h1>-->
<!--</div>-->
<!--<p>$timeout访问在规定的毫秒数后执行指定函数</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp',[]);-->
    <!--app.controller('myCtrl', function ($scope, $timeout) {-->
        <!--$scope.myHeader = "Hello World!";-->
        <!--$timeout(function () {-->
            <!--$scope.myHeader = "How are you today?"-->
        <!--}, 2000);-->
    <!--})-->
<!--</script>-->

<!--$interval服务-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>现在时间是:</p>-->
    <!--<h1>{{theTime}}</h1>-->
    <!--<h2>{{number}}</h2>-->
<!--</div>-->
<!--<p>$timeout访问在规定的毫秒数后执行指定函数</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp',[]);-->
    <!--app.controller('myCtrl', function ($scope, $interval) {-->
        <!--$scope.theTime = new Date().toLocaleTimeString();-->
        <!--$scope.number = 0;-->
        <!--$interval(function () {-->
            <!--$scope.theTime = new Date().toLocaleTimeString();-->
        <!--}, 1000);-->

        <!--$interval(function () {-->
            <!--$scope.number++;-->
        <!--}, 1000)-->
    <!--})-->
<!--</script>-->

<!--自定义服务-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>255的16进制是:</p>-->
    <!--<h1>{{hex}}</h1>-->
<!--</div>-->
<!--<p>自定义服务, 用于转换16进制数</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp',[]);-->
    <!--app.service('hexafy', function () {-->
        <!--this.myFunc = function (x) {-->
            <!--return x.toString(16);-->
        <!--}-->
    <!--});-->
    <!---->
    <!--app.controller('myCtrl', function ($scope, hexafy) {-->
        <!--$scope.hex = hexafy.myFunc(255);-->
    <!--})-->
<!--</script>-->

<!--过滤器中, 使用自定义服务-->
<!--<div ng-app="myApp">-->
    <!--在过滤器中使用服务:-->
    <!--<h1>{{255 | myFormat}}</h1>-->
<!--</div>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.service('hexafy', function () {-->
        <!--this.myFunc = function (x) {-->
            <!--return x.toString(16);-->
        <!--}-->
    <!--});-->

    <!--app.filter('myFormat', ['hexafy', function (hexafy) {-->
        <!--return function (x) {-->
            <!--return hexafy.myFunc(x);-->
        <!--}-->
    <!--}])-->
<!--</script>-->

<!--不使用 $interval 服务的情况下，运用 $apply，实现每一秒显示信息的功能。-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>现在时间是:</p>-->
    <!--<h1>{{theTime}}</h1>-->
<!--</div>-->
<!--<p>上述代码是不使用 $interval 服务的情况下，运用 $apply，实现每一秒显示信息的功能。</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.theTime = new Date().toLocaleTimeString();-->
        <!--$scope.setTime = function () {-->
            <!--$scope.$apply(function () {-->
<!--//              // $apply方法可以修改数据-->
                <!--$scope.theTime = new Date().toLocaleTimeString();-->
            <!--})-->
        <!--};-->
        <!--setInterval($scope.setTime, 1000)-->
    <!--})-->
<!--</script>-->

<!--$watch：持续监听数据上的变化，更新界面-->
<div ng-app="myApp" ng-controller="myCtrl">
    <b>请输入姓名:</b><br>
    <b>姓:</b><input type="text" ng-model="lastName"><br>
    <b>名:</b><input type="text" ng-model="firstName"><br>
    <h1>{{lastName + ' ' + firstName}}</h1>
    <h2>{{fullName}}</h2>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.lastName = "";
        $scope.firstName = "";

        // 监听lastName的变化, 更新fullName
        $scope.$watch('lastName', function () {
            $scope.fullName = $scope.lastName + ' ' + $scope.firstName;
        });

//      // 监听firstName的变化, 更新fullName
        $scope.$watch('firstName', function () {
            $scope.fullName = $scope.lastName + ' ' + $scope.firstName;
        })
    })
</script>
</body>
</html>